<template>
  <div class="app-container">
    <uc-table v-if="!enterPriseHidden" url="admin/equipment/getEquipmentPage" name="设备" ref="equipmentTable" pageable
              table-border :search-form="searchForm" @selection-change="handleSelectionZChange">
      <template slot="searchForm">
        <el-form size="mini" :inline="true" :model="searchForm" class="demo-form-inline filter-container">
          <!--搜索输入框-->
          <el-form-item>
            <el-input type="text" v-model="searchForm.name" placeholder="请输入设备名称" clearable
                      @clear="clearInput()"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.equipmentTypeId" placeholder="请选择设备类型" style="width: 100%">
              <el-option
                  v-for="item in equipmentTypeData"
                  :key="item.ucId"
                  :label="item.name"
                  :value="item.ucId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.jcEquipmentId" placeholder="请选择监测设备" style="width: 100%">
              <el-option
                  v-for="item in jcEquipmentOptions"
                  :key="item.ucId"
                  :label="item.name"
                  :value="item.ucId"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="enterPriseHidden">
            <el-select v-model="searchForm.enterpriseId" placeholder="请选择主体" clearable @clear="clearInput1">
              <el-option v-for="(item,index) in enterpriseDominantList" :key="index" :value="item.ucId"
                         :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.realStatus" placeholder="请选择设备状态" clearable @clear="clearInput1">
              <el-option v-for="(item,index) in realStatusOptions" :key="index" :value="item.dictValue"
                         :label="item.dictLabel"></el-option>
            </el-select>
          </el-form-item>
          <!--搜索按钮--新增按钮-->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" class="filter-item" @click="handleSearch()">查询</el-button>
            <el-button type="success" icon="el-icon-plus" class="filter-item" @click="handleAdd()">新 增</el-button>
            <el-button type="primary" icon="el-icon-edit" class="filter-item" @click="handleCycle()">批量设备维保周期
            </el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="columns">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column prop="name" label="设备名称" align="left"></el-table-column>
        <el-table-column prop="enterpriseName" label="企业名称" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="buildName" label="建筑名称" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="regionName" label="任务区" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="cycle" label="维保周期" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ cycleFormat(scope.row.cycle) }}
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="设备类型" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="isLinked" label="是否联动设备" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ yesOrNoFormat(scope.row.isLinked) }}
          </template>
        </el-table-column>
        <!--                <el-table-column prop="fireproofRegionRemark" label="防火区" align="left" show-overflow-tooltip></el-table-column>-->
        <el-table-column prop="realStatus" label="设备状态" align="left">
          <template slot-scope="scope">
            {{ scope.row.realStatus| equipmentOnlineStatus }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="240" align="left" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <!--编辑按钮-->
            <el-button size="mini" icon="el-icon-edit" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" icon="el-icon-info" type="success" @click="handleInfo(scope.row)">详情</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" :loading="deleteLoading"
                       @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </template>
    </uc-table>

    <div v-else>
      <el-form size="mini" :inline="true" :model="searchForm" class="demo-form-inline filter-container">
        <!--搜索输入框-->
        <el-form-item>
          <el-input type="text" v-model="searchForm.name" placeholder="请输入设备名称" clearable
                    @clear="clearInput()"></el-input>
        </el-form-item>
        <el-form-item v-if="enterPriseHidden">
          <el-select v-model="searchForm.enterpriseId" placeholder="请选择主体" clearable @clear="clearInput1">
            <el-option v-for="(item,index) in enterpriseDominantList" :key="index" :value="item.ucId"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <!--搜索按钮--新增按钮-->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" class="filter-item" @click="handleSearch()">查询</el-button>
          <el-button type="success" icon="el-icon-plus" class="filter-item" @click="handleAdd()">新 增</el-button>
        </el-form-item>
      </el-form>
      <tree-table :loading="listLoading" :data="levelEquipmentList" :columns="columns">
        <el-table-column prop="realStatus" label="设备状态" align="left">
          <template slot-scope="scope">
            {{ scope.row.realStatus| equipmentOnlineStatus }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="240" align="left" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <!--编辑按钮-->
            <div v-if="scope.row.realStatus!=null">
              <el-button size="mini" icon="el-icon-edit" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" icon="el-icon-info" type="success" @click="handleInfo(scope.row)">详情</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" :loading="deleteLoading"
                         @click="handleDelete(scope.row)">删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </tree-table>
    </div>
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="维保周期" prop="cycleId">
          <el-select v-model="form.cycleId" placeholder="请选择维保周期" style="width: 100%">
            <el-option v-for="(item,index) in cycleList" :key="index" :value="item.ucId"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型" prop="equipmentTypeId">
          <el-select v-model="form.equipmentTypeId" placeholder="请选择设备类型" style="width: 100%">
            <el-option
                v-for="item in equipmentTypeData"
                :key="item.ucId"
                :label="item.name"
                :value="item.ucId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UcTable from "@/components/UcTable/index.vue";
import {deleteInEquipment, getLevelEquipmentList, updateDatas, getAllJcEquipment} from "@/api/equipment";
import {getInEnterpriseDominantList} from "@/api/enterpriseDominant";
import TreeTable from "@/components/treeTable/index.vue";
import {getCycleList} from "@/api/cycle";
import {getAllData} from "@/api/equipmentType";

export default {
  name: "equipmentList",
  components: {TreeTable, UcTable},
  data() {
    return {
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      searchForm: {
        deleted: false,
      },
      levelEquipmentList: [],
      enterpriseDominantList: [],
      deleteLoading: false,
      listLoading: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      columns: [
        {
          value: 'name',
          text: '名称'
        }
      ],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      form: {},
      cycleList: [],
      yesOrNoOptions: [],
      equipmentTypeData: [],
      scycleOptions: [],
      xjTypeOptions: [],
      jcEquipmentOptions: [],
      realStatusOptions: []
    }
  },
  created() {
    if(this.$route.params.realStatus!=null){
      this.searchForm.realStatus = this.$route.params.realStatus
    }
    this.getInEnterpriseDominantList()
    if (this.enterPriseHidden) {
      this.listLoading = true
      this.getLevelEquipmentList()
    }
    this.getDicts("xj_equp_type").then(response => {
      this.xjTypeOptions = response.data.data;
    });
    this.getDicts("yes_or_no").then(response => {
      this.yesOrNoOptions = response.data.data;
    });
    this.getDicts("cycle_type").then(response => {
      this.scycleOptions = response.data.data;
    });
    this.getDicts("real_status").then(response => {
      this.realStatusOptions = response.data.data;
    });
    getAllJcEquipment({}).then(response => {
      this.jcEquipmentOptions = response.data;
    })
    this.getCycleList()
    this.getAllData()
  },
  computed: {
    enterPriseHidden() {
      let roleCode = this.$store.getters.roleCode;
      return roleCode == "ADMIN" || roleCode == "XT-ADMIN" || roleCode == "ZD-ADMIN" || roleCode == "DD-ADMIN" || roleCode == "JW-ADMIN" || roleCode == "WB-ADMIN"
    }
  },
  methods: {
    getAllData() {
      getAllData().then(res => {
        this.equipmentTypeData = res.data.data
      })
    },
    // 状态字典翻译
    yesOrNoFormat(data, column) {
      return this.selectDictLabel(this.yesOrNoOptions, data);
    },
    cycleFormat(data, column) {
      return this.selectDictLabel(this.scycleOptions, data);
    },
    handleSelectionZChange(selection) {
      this.ids = selection.map(item => item.ucId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    getLevelEquipmentList() {
      getLevelEquipmentList(this.searchForm).then(res => {
        this.listLoading = false
        this.levelEquipmentList = res.data
      }).catch(error => {
        this.listLoading = false
      })
    },
    handleSearch() {
      if (this.enterPriseHidden) {
        this.listLoading = true
        this.getLevelEquipmentList()
      } else {
        this.$refs.equipmentTable.getTableData(1)
      }
    },
    handleAdd() {
      this.$router.push("/equipment/equipmentEdit/0")
    },
    handleEdit(val) {
      this.$router.push("/equipment/equipmentEdit/" + val.ucId)
    },
    handleInfo(val) {
      this.$router.push("/equipment/equipmentInfo/" + val.ucId)
    },
    clearInput() {
      //清除输入框
      this.searchForm.name = null
      this.handleSearch()
    },
    clearInput1() {
      //清楚企业下拉框
      this.searchForm.enterpriseId = null
      this.handleSearch()
    },
    clearInput2() {
      //清楚企业下拉框
      this.searchForm.type = null
      this.handleSearch()
    },
    clearInput3() {
      this.searchForm.isMaintenance = null
      this.handleSearch()
    },
    handleDelete(val) {
      this.$confirm('您确定要执行删除' + val.name + '这个设备吗？', '提醒信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteLoading = true
        deleteInEquipment(val).then(res => {
          this.deleteLoading = false
          this.$notify.success({
            title: '成功',
            message: "删除设备成功"
          })
          this.handleSearch()
        }).catch(res => {
          this.deleteLoading = false
          this.$notify.error({
            title: '失败',
            message: res.msg
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getInEnterpriseDominantList() {
      getInEnterpriseDominantList({deleted: false}).then(res => {
        this.enterpriseDominantList = res.data
      }).catch(error => {

      })
    },
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.ids.length == 0) {
            this.$notify.error({
              title: '失败',
              message: "请选择要配置的设备"
            })
            return
          }
          this.form.ucIds = this.ids
          updateDatas(this.form).then(response => {
            if (response.data.code == 200) {
              this.$notify.success({
                title: '成功',
                message: "设备维保周期批量设置成功"
              })
            } else {
              this.$notify.error({
                title: '失败',
                message: response.data.msg
              })
            }
            this.open = false;
            this.handleSearch();
          });
        }
      });
    },
    getCycleList() {
      getCycleList({}).then(res => {
        this.cycleList = res.data.data
      })
    },
    handleCycle() {
      this.reset();
      this.open = true;
      this.title = "添加字典类型";
    },
    reset() {
      this.form = {
        dictId: undefined,
        dictName: undefined,
        dictType: undefined,
        status: "0",
        remark: undefined
      };
      this.resetForm("form");
    }
  }
}
</script>

<style scoped>

</style>
